<template>
  <input type="text" class="ipt" 
  @input="handleInput"
  :class="{
      success:state==='success',
      error:!state==='error',
  }"
  @blur="blurFn"
   >
</template>

<script>
// import { Notify } from 'vant';
export default {
    //可以不要这个，因为父组件上的属性，是直接应用到子组件的
props:{
    // value:String
    rules:RegExp,
    msg:{
        type:String,
          
      // 如果没有传入，就使用默认值
      default: "输入的数据不合法",
    }
},
data () {
    return {
        state:true,
    }
},
methods: {
    handleInput(e){
        //触发事件的目标真是Dom节点,获取输入的内容
        
        this.$emit('input',e.target.value)
    },
    blurFn(e){
        //拿到输入的内容给到str
        const str=e.target.value.trim();
        if(this.rules){

            if(this.rules.test(str)){
                console.log(this.rules,str,'成功了',this.msg);
                // 是就改变颜色绿色
                this.state='success'
            }else{
                //不是就红色
                this.state='error'
           this.$notify({type : 'warning' ,message:this.msg})
                 
            }
        }
        //判断父组件传过来的正则校验字符串是不是匹配str
    }
}
}
</script>

<style lang="less" scoped>
.ipt{
    width: 318px;
    height: 48px;
    font-size: 20px;
    border: none;
    outline: none;
    border-bottom: 3px solid #ccc;
    margin: 20px auto;
    display: block;
}
.success{
     border-bottom-color: green;
}
.error{
    border-bottom-color: red;
     color: red;
}
</style>

